<div>
	<div class="table" ng-controller="StudentRecommendationStrengthGrid">
		<div class="panel panel-primary">
			<!-- Default panel contents -->
			<!-- <div class="panel-heading">Search</div> -->
			<div class="panel-body">
			<form novalidate class="simple-form">
				<table class="table table-condensed">
					<tr>
						<td width="5%">Grade</td>
						<td width="10%"><select class="form-control input-sm" ng-model="searchCriteria.gradeId" ng-change="criteriaChanged()" ng-options="c.id as c.value for c in gradeList"></select></td>
						<td width="5%"></td>
						<td><button type="button" class="btn btn-success btn-sm" ng-click="getDetails()">Get Details</button></td>
					</tr>
				</table>
			</form>
			</div>
		</div>
		<div class="panel panel-primary" ng-show="showGrid">
		<!-- Button trigger modal -->
			<!-- Default panel contents -->
			<div class="panel-heading">Student Recommendation and Strength & Weakness Details</div>
			<div class="panel-body">
				<table class="table">
					<tr>
						<td colspan="8">
							<div class="table">
								<div>
									<form editable-form name="recommendationStrengthForm" onaftersave="saveTable()"
										oncancel="cancel()">
										<!-- table -->
										<table
											class="table table-bordered table-hover table-condensed">
											<tr style="font-weight: bold; background-color: #f4f4f4;">
												<td style="width: 15%">Event</td>
												<td style="width: 15%">Competition Level</td>
												<td style="width: 15%">Date</td>
												<td style="width: 15%">Rank</td>
												<td style="width: 15%">Medal</td>
												<td style="width: 15%">Remarks</td>
												<td style="width: 30%">Upload Certificate</td>
												<td style="width: 10%"><span
													ng-show="sportsForm.$visible">Action</span></td>
											</tr>
											<tr ng-repeat="sportsVo in sportsVos | filter:filterSports">
												<td>
													<!-- editable username (text with validation) --> <span
													editable-select="sportsVo.sportId" e-form="sportsForm"
													e-ng-options="s.id as s.sportName for s in sportsList"
													>{{showSports(sportsVo)}}</span>
												</td> 
												<td>
													<!-- editable username (text with validation) --> <span
													editable-select="sportsVo.competitionLevel" e-form="sportsForm"
													e-ng-options="s.id as s.value for s in competitionLevelList"
													>{{showSportsCompetitionLevel(sportsVo)}}</span>
												</td> 
												<td>
												<span editable-bsdate="sportsVo.dated" e-datepicker-popup="dd-MMMM-yyyy" e-form="sportsForm">
            									{{ (sportsVo.dated | date:"dd/MM/yyyy") || 'empty' }}
          										</span></td>
          										<td> 
												<span editable-text="sportsVo.ranking" e-form="sportsForm">
            									{{ sportsVo.ranking || 'Not Specified' }}
          										</span></td>
          										<td>
												<span editable-select="sportsVo.medal" e-form="sportsForm" e-ng-options="s.id as s.value for s in medalsList">
            									{{ sportsVo.medal || 'Not Specified' }}
          										</span></td>
          										
          										<td>
          										<span editable-textarea="sportsVo.remarks" e-form="sportsForm">
            									{{ sportsVo.remarks || '' }}
          										</span></td>
          										</td>
          										<td>
          										<span editable-text="sportsVo.sportsAttachmentId" e-form="sportsForm">
            									{{ sportsVo.sportsAttachmentId || '' }}
          										</span></td>
          										</td>
												<td><button type="button" ng-show="sportsForm.$visible"
														ng-click="deleteSportsRow(sportsVo.cid, sportsVo.sid)"
														class="btn btn-danger pull-right">Del</button></td>
											</tr>
										</table>
										<!-- buttons -->
										<div class="btn-edit">
											<button type="button" class="btn btn-default"
												ng-show="!sportsForm.$visible" ng-click="sportsForm.$show()">
												edit</button>
										</div>
										<div class="btn-form" ng-show="sportsForm.$visible">
											<button type="button" ng-disabled="sportsForm.$waiting"
												ng-click="addSportsRow()" class="btn btn-default pull-right">add
												row</button>
											<button type="submit" ng-disabled="sportsForm.$waiting"
												class="btn btn-primary">save</button>
											<button type="button" ng-disabled="sportsForm.$waiting"
												ng-click="sportsForm.$cancel()" class="btn btn-default">cancel</button>
										</div>
									</form>
								</div>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
	
	<!-- Any Queries has to be written in this div.. This is purely for Development purposes and it needs to be clean up  -->
		<div class="panel panel-primary">
			<ul style="list-style: square;">
				<li>Are We Supporting Categories in this Page ??</li>
				<li>Deepak Please implement Attachment Logic</li>

			</ul>
		</div>
	<!-- JUNK ENDS HERE -->	
		
	</div>
</div>